<template>
  <div class="item-list">
      <div class="item" v-for="(item, index) in questions" :key="item.id">
          <!-- index . item.type 空格 分值: 分数
             题干
           -->
          <h2 class="title">
              {{ index + 1 + '.' + item.type + '&nbsp;分值：' + item.scores }}
          </h2>
          <h3 v-html="item.title"></h3>
          <!-- 试题详情 -->
          <div class="info">
              <!-- 单选题 -->
              <template v-if="item.type === '单选题'">
                  <p v-for="child in item.answers" :class="{ yes: child.answerno === item.answer }">
                      <el-radio :label="child.content" size="large" />
                  </p>
              </template>
              <!-- 多选题 -->
              <template v-if="item.type === '多选题'">
                  <p v-for="child in item.answers" :class="{ yes: item.answer!.split('|').includes(child.answerno) }">
                      <el-checkbox :label="child.content" :indeterminate="false" :checked="false" size="large" />
                  </p>
              </template>

              <!-- 判断题 正确答案 正确 -->
              <el-alert v-else-if="item.type === '判断题'" :title="`正确答案：${item.answer}`" type="success"
                  :closable="false" />
              <!-- 问答题 填空 答案解析： -->
              <div class="more-item" v-else-if="item.type === '问答题' || item.type === '填空题'">
                  <el-alert :title="`正确答案：${!item.answer && ''}`" type="success" :closable="false" />
                  <el-alert :title="`答案解析：${item.explains ? item.explains : '暂无解析'}`" type="info" :closable="false" />
              </div>

          </div>
      </div>
  </div>
</template>
<script setup lang='ts'>
const props = withDefaults(defineProps<
{
  questions: any []
}>(), {
  questions: () => []
})
</script>


<style lang='less' scoped>

.item {

h2,
h3 {
  font-size: 14px;
}

h2 {
  color: #333;
}

h3 {
  color: #999;
  line-height: 30px;
  padding-left: 8px;
}

:deep(.el-alert) {
  padding-left: 0 !important;
}

:deep(.el-radio.el-radio--large .el-radio__inner) {
  width: 20px;
  height: 20px;
}
:deep(.el-checkbox.el-checkbox--large .el-checkbox__inner) {
  width: 18px;
  height: 18px;
}
.el-alert {
margin: 5px 0;
}

.info {
 p {
  padding-left: 8px;
  margin-bottom: 8px;
  pointer-events:none;
 }
  .yes {
      background-color: #eefaf6;
  }
}

}
</style>